<!DOCTYPE html>
<html>
    <head>
        <title>RAGE N FURIOUS</title>
        <meta charset="utf-8" />
        <link rel=stylesheet type="text/css" href="style.css">
        <!--<script type="text/javascript" src="spireio.min.js"></script>
        <script type="text/javascript" src="spireio.js"></script>-->
		<script type="text/javascript" src="script_index/init_index.js"></script>
		<script type="text/javascript" src="script_index/push_package_index.js"></script>
		<script type="text/javascript" src="script_index/chat_bulle_index.js"></script>
		<script type="text/javascript" src="script_index/gameplay_index.js"></script>
		<script type="text/javascript" src="script_index/timer_index.js"></script>
		<script type="text/javascript" src="script_index/items_index.js"></script>
		<script type="text/javascript" src="script_index/saut_collision_index.js"></script>
        <script src="http://js.pusher.com/1.11/pusher.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
        <!-- <script type="text/javascript">
            var pusher = new Pusher('ffa5cf721c93b85b17b9'); // Replace with your app key
            var thingChannel = pusher.subscribe('test_channel');
            thingChannel.bind('my_event', sauterO("opponent"));
        </script>-->
		<script type="text/javascript">
        //<!--
                function ffalse()
                {
                        return false;
                }
                function ftrue()
                {
                        return true;
                }
                document.onselectstart = new Function ("return false");
                if(window.sidebar)
                {
                        document.onmousedown = ffalse;
                        document.onclick = ftrue;
                }
        //-->
        </script>
    </head>

    <body id="body">
        <div id="principal">
            <input type="text" id="pseudo_local" size="18" />
            <input type="text" id="pseudo_distant" size="18" />
            <span id="alert_message" style="color:red;"></span>
			
            <div class="game" id="player1">
                <div id="bar-player1">
                    <img id="vie-1-joueur" src="images/vie.png" alt="Vie" style=" margin-top:3px; margin-left:5px;"/>
                    <img id="vie-2-joueur" src="images/vie.png" alt="Vie" />
                    <img id="vie-3-joueur" src="images/vie.png" alt="Vie" />
                    <div id="subragebar">
                            <div id="ragebar-joueur" class="ragebar"><span id="text-ragebar-joueur" class="text">100%</span></div>
                    </div>
                    <div style="clear:left; display:inline;"></div>
                    <div id="subfuriousbar">
                            <div id="furiousbar1" class="furiousbar"><span id="text-furiousbar-joueur" class="text">100%</span></div>
                    </div>
                    <img id="firebar1" src="images/firebar.png" alt="FireBullet" style="margin-left:210px;"/>
                    <span id="nb-firebullet-joueur" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                    <img id="teleport1" src="images/tp.png" alt="Teleport" style="margin-left:3px;"/>
					<span id="nb-teleport-joueur" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                    <img id="heal1" src="images/healbar.png" alt="Heal" style="margin-left:3px;"/>
					<span id="nb-heal-joueur" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                    <img id="steal1" src="images/stealbar.png" alt="Heal" style="margin-left:3px;"/>
					<span id="nb-steal-joueur" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                </div>
				<canvas id="canvas-joueur" height="200" width="880" style="position:absolute;">
					<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
				</canvas>
                <div id="playground-player1" style="height:200px;">
                    <img id="joueur" style="position:relative; top:142px; left:180px; " width="30" height="40" src="images/alice.png"/>
                </div>
            </div>
			<div style="clear:left; display:inline;"></div>
			
            <div id="player-dist" class="game">
                <div id="bar-player-dist">
                    <img id="vie-1-joueur-dist" src="images/vie.png" alt="Vie" style=" margin-top:3px; margin-left:5px;"/>
                    <img id="vie-2-joueur-dist" src="images/vie.png" alt="Vie" />
                    <img id="vie-3-joueur-dist" src="images/vie.png" alt="Vie" />
                    <div id="subragebar">
                            <div id="ragebar-joueur-dist" class="ragebar"><span id="text-ragebar-joueur-dist" class="text">100%</span></div>
                    </div>
                    <div style="clear:left; display:inline;"></div>
                    <div id="subfuriousbar">
                            <div id="furiousbar-dist" class="furiousbar"><span id="text-furiousbar-joueur-dist" class="text">100%</span></div>
                    </div>
                    <img id="firebar12" src="images/firebar.png" alt="FireBullet" style="margin-left:210px;"/>
					<span id="nb_firebullet-joueur-dist" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                    <img id="teleport12" src="images/tp.png" alt="Teleport" style="margin-left:3px;"/>
					<span id="nb-teleport-joueur-dist" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                    <img id="heal12" src="images/healbar.png" alt="Heal" style="margin-left:3px;"/>
					<span id="nb-heal-joueur-dist" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                    <img id="steal12" src="images/stealbar.png" alt="Heal" style="margin-left:3px;"/>
					<span id="nb-steal-joueur-dist" style="display:inline;color:white;font-size:0.7em;margin-bottom:5px;">x5</span>
                </div>
				<canvas id="canvas-joueur-dist" height="220" width="880" style="position:absolute;">
					<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
				</canvas>
                <div id="playground-player-dist" style="height:200px;">
					
						<svg name="bulle" id="bulle" width="250" height="40" version="1.1"
							xmlns="http://www.w3.org/2000/svg">
							<rect x="0" y="0" width="250" height="40" rx="15" fill="white" stroke="3"/>
							 <text id='text' x="20" y="25" style="fill:black;">Du texte en SVG !</text>
						</svg>
					
                    <img id="opponent" style="position:relative; top:142px; left:180px; " width="30" height="40" src="images/pikachuskate.png"/>
                </div>
            </div>
            <div id="chat-box">
                    <p id="chat-view"></p>
                    <input type="text" name="message" id="message" style="width:830px; position:relative;"/>
      					<input type="button" id="envoyer" value="Envoyer"></input>
                    <audio id="audio" src="sounds/pm_receive.wav" style="display:none;" controls="controls" ></audio>
            </div>
        </div>
		<svg name="roue" id="roue" width="201" height="201" version="1.1"
		xmlns="http://www.w3.org/2000/svg">
			<polygon points="100,0 58,9 29,29 100,100" fill="silver" stroke="black"/>
			<polygon points="29,29 9,58 0,100 100,100" fill="white" stroke="black"/>
			<polygon points="0,100 9,142 29,171 100,100" fill="silver" stroke="black"/>
			<polygon points="29,171 58,191 100,200 100,100" fill="white" stroke="black"/>
			<polygon points="100,0 142,9 171,29 100,100" fill="white" stroke="black"/>
			<polygon points="171,29 191,58 200,100 100,100" fill="silver" stroke="black"/>
			<polygon points="200,100 191,142 171,171 100,100" fill="white" stroke="black"/>
			<polygon points="171,171 142,191 100,200 100,100" fill="silver" stroke="black"/>
		</svg>
		
        <div pub-key="pub-539e2a83-2cf5-4051-b20f-08d6904a5334" sub-key="sub-66d0a3ca-67b2-11e1-8331-1ddf254cc96a" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
        <script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
        <script>(function(){
                // LISTEN FOR MESSAGES
                PUBNUB.subscribe({
                        channel	 : "saut",              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushMessage(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                                /*alert("Connection Lost." +
                                "Will auto-reconnect when Online."
                                )*/ document.getElementById("alert_message").innerHTML = "Attention, perte de la connectivité!";
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                                //alert("And we're Back!")
                                document.getElementById("alert_message").innerHTML = "";
                        }
                })
				PUBNUB.subscribe({
                        channel	 : "chat",              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushChatMessage(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                                /*alert("Connection Lost." +
                                "Will auto-reconnect when Online."
                                )*/ document.getElementById("alert_message").innerHTML = "Attention, perte de la connectivité!";
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                                //alert("And we're Back!")
                                document.getElementById("alert_message").innerHTML = "";
                        }
                })
				
        })();</script>
    </body>
</html>